
<template>
  <div> {{ msg }}</div>
  <button @click="add">点击</button><span>{{ num }}</span>
  <div>{{person.name}}</div>
</template>

<script >
import { reactive,ref } from "vue";
export default {
  //钩子函数
  setup(){
    //不是响应式的变量，
    let msg = ref("Hello Vue");
    let num = ref(0);
    //将普通对象变成响应式的状态，-->数据代理/劫持
    //深层代理  浅层:shallowReative
    //缺点：只能代理对象
    var person=reactive({
      name:'周飘',
      age:18,
      address:{
        prov:'福建'
      }
  });

    function add() {
      this.num++
    }

    return {
      msg,
      num,
      person,
      add
    }
    }
}
</script>